<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>人力资源管理系统 - 注册</title>
  <!-- Element UI CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <!-- 自定义登录/注册页面布局样式 -->
  <link rel="stylesheet" href="/static/css/login.css" />
</head>

<body>
  <!-- 顶部导航栏，logo和系统名称靠左 -->
  <header class="login-header">
    <div class="login-header-content">
      <img src="https://cdn.jsdelivr.net/gh/element-plus/element-plus@2.3.7/docs/public/images/element-plus-logo.svg"
        alt="LOGO" class="login-logo" />
      <span class="login-title">人力资源管理系统</span>
    </div>
  </header>
  <!-- 中间区域：背景图片+注册表单居右 -->
  <main class="login-main">
    <div class="login-main-left"></div>
    <div id="app" class="login-form-wrapper">
      <el-form :rules="rules" :model="formData" ref="registerForm" label-width="80px" @submit.native.prevent="handleRegister">
        <h2 class="login-form-title">注册账号</h2>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username" prefix-icon="el-icon-user" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="formData.role" placeholder="请选择角色">
            <el-option label="管理员" value="admin"></el-option>
            <el-option label="普通员工" value="employee"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" prefix-icon="el-icon-lock" type="password" placeholder="请输入密码"
            show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirm_password">
          <el-input v-model="formData.confirm_password" prefix-icon="el-icon-lock" type="password" placeholder="请再次输入密码"
            show-password clearable></el-input>
        </el-form-item>
        <div class="login-form-row login-form-actions">
          <el-button type="primary" :loading="loading" @click="handleRegister" style="width: 220px">注册</el-button>
          <a href="/auth/login" class="login-link">已有账号</a>
        </div>
      </el-form>
    </div>
  </main>
  <!-- 页脚 -->
  <footer class="login-footer">
    &copy; 2025 人力资源管理系统 | 技术支持：IT部门
  </footer>
  <script src="/static/js/vue.min.js"></script>
  <script src="/static/js/element-ui.js"></script>
  <script src="/static/js/axios.min.js"></script>
  <script src="/static/js/request.js"></script>
  <script src="/static/js/api/auth.js"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        // 保存当前Vue实例的引用，用于验证函数中
        const vm = this;
        
        return {
          formData: {
            username: "",
            role: "employee",
            password: "",
            confirm_password: "",
          },
          loading: false,
          rules: {
            username: [
              { required: true, message: "请输入用户名", trigger: "blur" },
            ],
            role: [
              { required: true, message: "请选择角色", trigger: "change" },
            ],
            password: [
              { required: true, message: "请输入密码", trigger: "blur" },
              // 可以添加密码强度验证
              { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
            ],
            confirm_password: [
              { required: true, message: "请再次输入密码", trigger: "blur" },
              { 
                validator: function(rule, value, callback) {
                  console.log(vm.formData)
                  // 使用预先保存的Vue实例引用访问formData
                  if (value !== vm.formData.password) {
                    callback(new Error('两次输入的密码不一致'));
                  } else {
                    callback();
                  }
                }, 
                trigger: 'blur' 
              }
            ]
          }
        };
      },
      methods: {
        async handleRegister() {
          const valid = await this.$refs.registerForm.validate();
          if (!valid) return;
          
          this.loading = true;
          try {
            await authAPI.register(this.formData);
            this.$message.success("注册成功！");
            setTimeout(() => window.location.href = "/auth/login", 1500);
          } catch (error) {
            this.$message.error(error.response?.data?.msg || "注册失败");
          } finally {
            this.loading = false;
          }
        },
      },
    });
  </script>
</body>

</html>
